<template>
	<view class="">
		<view class="default-container">
			<!-- 轮播图 -->
			<view style="width: 750upx; height: 292upx;">
				<swiper :autoplay="true" :interval="4000" indicator-dots>
					<swiper-item v-for="(item, index) in swiperData" :key="index" class="d-flex j-center a-center" >
						<image :src="item.item.pic_url" style="width: 700upx; height: 292upx; border-radius: 25upx;" ></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 5x2 icon text 排列 -->
			<tab-class :resdata="tabClassData" ></tab-class>
		</view>
		<!-- 年货节主会场 -->
		<gc-left-center-right img-src="https://img.youpin.mi-img.com/jianyu/d6b367f2affdfeca94005c9f92afa72d.gif"></gc-left-center-right>
		
		<view class="default-container" style="padding-top: 10upx;">
			<!-- 图片四行 耳机 特惠 新品 小米11 -->
			<gc-horizontal4-img :resdata="gcImg4"></gc-horizontal4-img>
			<!-- 有品头条 -->
			<gc-top-bottom img-src="https://img.youpin.mi-img.com/jianyu/3b2537b84c2f3b98abe859f40cc6564a.png@base@tag=imgScale"></gc-top-bottom>
			<!-- 小米有品众筹 -->
			<zhonchou></zhonchou>
		</view>
	</view>
</template>
<script>
	import api from '@/api/api.js'
	import tabClass from '@/components/common/tabClass/index.vue'
	import gcTopBottom from '@/components/common/goods-container/gc-top-bottom.vue/index.vue'
	import gcLeftCenterRight from '@/components/common/goods-container/gc-left-center-right/index.vue'
	import gcHorizontal4Img from '@/components/common/goods-container/gc-horizontal-4-img/index.vue'
	import card from '@/components/common/card/index.vue'
	
	import zhonchou from './components/zhonchou.vue'
	
	export default {
		components: { 
			tabClass, gcTopBottom, gcLeftCenterRight, gcHorizontal4Img, card,
			zhonchou
		},
		data() {
			return {
				indexPageData: {},
				swiperData: [], // 轮播图
				tabClassData: [],
				gcImg4: [
					{ src: 'https://img.youpin.mi-img.com/daren/6591505f2c0bb2d7b469f38dd316e540.png@base@tag=imgScale&h=242&w=171' },
					{ src: 'https://img.youpin.mi-img.com/daren/0976b7d335da3ce306ebd0f792cbdc2c.png@base@tag=imgScale&h=242&w=171' },
					{ src: 'https://img.youpin.mi-img.com/daren/3dbbef8300ff60f370da717e6296bdb9.png@base@tag=imgScale&h=242&w=171' },
					{ src: 'https://img.youpin.mi-img.com/daren/007773efaa256c469cafa75c4c0f98eb.png@base@tag=imgScale&h=242&w=171' }
				]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const data = await api.getIndexPageData()
				this.indexPageData = data
				// 轮播图数据
				this.swiperData = this.getSwiperData()
				this.tabClassData = this.getTabClassData()
			},
			// 提取轮播图数据
			getSwiperData() {
				// 轮播图数据
				if (this.indexPageData 
					&&	this.indexPageData.homepage
					&&  this.indexPageData.homepage.floors
				) {
					const list = this.indexPageData.homepage.floors.filter(item => item.floor_id === 12572)
					if (list && list.length > 0) {
						return list[0].data.items // 最后的获取到的数据
					}
				}
				return []
			},
			// 提取 Tab Class内容的数据
			getTabClassData() {
				if (this.indexPageData 
					&&	this.indexPageData.homepage
					&&  this.indexPageData.homepage.floors
				) {
					const arr = this.indexPageData.homepage.floors.filter(item => item.floor_id === 49662)
					let list = []
					if (arr && arr.length > 0) {
						list = arr[0].data.items // 最后的获取到的数据
					} else {
						return []
					}
					const cpList = JSON.parse(JSON.stringify(list))
					if (cpList && cpList.length > 0) {		
						const reList = []
						while (cpList.length>0) {
							reList.push([...cpList.splice(0, 10)])
						}
						console.log('efefe', reList)
						return  reList// 最后的获取到的数据
					}
				}
				return []
			}
		}
	}
</script>
<style scoped>
.default-container {
	background: -webkit-linear-gradient(top, #C82914, #fff);     
	background: -moz-linear-gradient(top, #C82914, #fff); 
}
</style>